<template>
  <div>
    <div v-demo:large.trim="str + 10086"></div>
    <el-date-picker
        v-model="value1"
        type="datetime"
        placeholder="选择日期时间">
    </el-date-picker>
    <el-select v-model="input"></el-select>
  </div>
</template>

<script>
export default {
  name: "directives",
  data() {
    return {
      str: 'hello world',
      value1: '',
      input: ''
    }
  },
  methods:{
   a(){
     const box = document.createElement('div')
     box.innerHTML=`
        <span>开始日期： </span><input /><br />
        <span>结束日期： </span><input /><br />
        <span>加班类型--1公休日,2加班,3节假日加班： </span><input /><br />
        <span>加班事由： </span><input /><br />
        <span>加班地点： </span><input /><br />
        <button onclick="submit()" style="padding: 5px;float: right;cursor: pointer"> 保存 </button>`
     box.setAttribute("style", " position: fixed;top: 50px;left: 50%;transform: translateX(-50%);z-index: 99999;padding:20px;background:pink")
     document.body.appendChild(box)
   }
  }
}
</script>

<style scoped>
.box{
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
}
</style>
